﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SuperStore.Models.CartItem>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Your Cart</h2>
    <h2>
        Total: <span id="TotalCartCost"></span>&nbsp; and&nbsp; <span id="TotalCartMSPoints">
        </span>
    </h2>
    <div class="button"><%: Html.ActionLink("Check Out","checkout","cart") %></div>
    <table>
        <tr>
            <th>
            </th>
            <th>
                Game
            </th>
            <th>
                Quantity
            </th>
            <th>
                Cost
            </th>
            <th>
                Total Cost
            </th>
        </tr>
        <% foreach (var item in Model)
           { %>
        <tr class="CartItem" data="<%: item.OrderItemID %>">
            <td>
                <a href="<%: Url.Action("Remove", "Cart", new  { id=item.OrderItemID }) %>">
                    <img src="/content/images/cart_remove.png" alt="Remove" /></a>
            </td>
            <td>
                <%: item.Title %>
            </td>
            <td>
                <%: Html.TextBox("Quantity", item.Quantity, new { @class="QuantityTextbox" })%>
            </td>
            <td>
                <span id="ItemCost"></span>
            </td>
            <td>
                <span id="ItemTotalCost"></span>
            </td>
        </tr>
        <% } %>
    </table>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="/Content/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        function UpdateCartTotals() {
            $.post("/Cart/GetCartTotals", function (data) {
                $("#TotalCartMSPoints").text(data.TotalPoints + " points");
                $("#TotalCartCost").text(data.TotalCost);
            }, "json");
        }

        function UpdateCartItems() {
            $(".CartItem").each(function () {
                var thisElement = $(this);
                UpdateCartItem(thisElement);
            });
        }

        function UpdateCartItem(thisElement) {
            $.post("/Cart/GetUpdatedCostDetails", { "orderItemId": thisElement.attr("data") }, function (data) {
                thisElement.find("#ItemCost").text(data.ItemCost);
                thisElement.find("#ItemTotalCost").text(data.TotalItemCost);
            }, "json");
        }

        $(document).ready(function () {
            $.ajax({ cache: false });
            UpdateCartTotals();
            UpdateCartItems();

            $(".QuantityTextbox").bind("focusout", function () {
                var quantityTextbox = $(this);
                var quantity = quantityTextbox.val();
                var rowElement = quantityTextbox.parents("tr");
                var itemId = rowElement.attr("data");

                $.post("/Cart/UpdateCart", { "quantity": quantity, "orderItemId": itemId }, function (data) {
                    if (quantity > 0) {
                        UpdateCartItem(rowElement);
                    }
                    else {
                        rowElement.remove();
                    }

                    UpdateCartTotals();
                }, "json");
            });
        });
    </script>
</asp:Content>
